<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目列表</title>

</head>
<body>
{#<h3 style="padding-left: 10px;color: #353c48">项目列表：<span#}
{#        style="font-size: small;color: grey;">（这里显示全部项目,您可以进入他人的项目中查看）</span></h3>#}

{#新增项目按钮#}
<h3 style="padding-left: 10px;color: #353c48">项目列表：
    <span style="font : normal 15px/20px 微软雅黑;">
             &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;点击 <a style="font-size: 20px" href="#" onclick="javascript:document.getElementById('add_project_div').style.display='block'">新增项目</a>
        即可创建属于您的新项目！
    </span>
</h3>


</button>
<div style="padding-left: 10px">
    <table class="table table-striped">
        <thead>
        <tr>
            <th class="col-md-2">项目id</th>
            <th class="col-md-3">项目名称</th>
            <th class="col-md-2">创建者</th>
            <th class="col-md-2">备注</th>
            <th class="col-md-3">操作</th>
        </tr>
        </thead>

        <tbody>
        {% for project in projects %}
            <tr>
                <td>{{ project.id }}</td>
                <td>{{ project.name }}</td>
                <td>{{ project.user }}</td>
                <td>{{ project.remark }}</td>
                <td>
                    <button class="btn btn-success"
                            onclick="javascript:document.location.href='/apis/{{ project.id }}'">进入
                    </button>
                    <button class="btn btn-danger" onclick="delete_project('{{ project.id }}')">删除</button>
                </td>
            </tr>
        {% endfor %}


        </tbody>
    </table>
</div>

<script>
    {#    删除#}

    function delete_project(id) {
        status = confirm("是否删除该项目？");
        if (status == false) {
            return;
        } // 直接return，也就相当于这个程序直接返回了，下面真正删除项目的代码都不执行了
        $.get("/delete_project/", {"id": id},
            function (ret) {
                //删除后刷新页面
                document.location.reload();
            }
        )

    }

</script>


{#新增窗口#}
<div id="add_project_div"
     style="display: none;width: 50%;background: white;border: 1px solid black;position: absolute;left: 25%;top: 90px;padding-left: 10px;box-shadow: 4px 4px 8px gray;border-radius: 5px ">
    <h3>项目名称：（最多100字）</h3>
    <input id="project_name" type="text" placeholder="请输入项目名称" style="width: 95%">
    <br><br>
    <input id="project_remark" type="text" placeholder="请输入备注" style="width: 95%">
    <br><br>
    <button class="btn btn-success" onclick="add_project()">确定</button>
    <button class="btn btn-danger" onclick="javascript:document.getElementById('add_project_div').style.display='none'">
        取消
    </button>
    <br><br>
</div>

<script>
    function add_project() {
        project_name = document.getElementById('project_name').value;
        project_remark = document.getElementById('project_remark').value;
        $.get("/add_project/", {
                "project_name": project_name,
                "project_remark": project_remark
            }, function (ret) {
                document.location.reload();
            }
        )
    }
</script>

</body>
</html>